<template>
  <ol>
    <li v-for="item in 5">{{item}}</li>
  </ol>
  <ul>
    <li v-for="name in arr">{{name}}</li>
  </ul>
  <table border="1">
    <caption>商品列表</caption>
    <tr><th>编号</th><th>商品标题</th><th>价格</th><th>库存</th><th>操作</th></tr>
    <tr v-for="(p,i) in productArr">
      <td>{{i+1}}</td><td>{{p.title}}</td><td>{{p.price}}</td><td>{{p.num}}</td>
      <td><button @click="del(i)">删除</button></td>
    </tr>
  </table>
</template>

<script setup>
  import {ref} from "vue";
  const del = (i)=>{
    if (confirm("您确认删除此商品吗?")){
      productArr.value.splice(i,1);
    }
  }
  const arr = ref(["张三","李四","王五"]);
  const productArr = ref([{title:"小米手机",price:5000,num:1000},
    {title:"华为手机",price:8000,num:0},
    {title:"Oppo手机",price:4000,num:3000}]);
</script>

<style scoped>

</style>